<template>
    <div id="apply">
        <!--搜索框-->
        <div class="search-box">
            <el-form :inline="true" :model="searchItem"  ref="searchItem" class="search-in">
                <el-form-item label="订单编号" class="search-item" prop="loanNo">
                    <el-input placeholder="订单编号" v-model="searchItem.loanNo"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" class="search-item" prop="phone">
                    <el-input placeholder="用户手机号" v-model="searchItem.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名" class="search-item" prop="realName">
                    <el-input placeholder="用户姓名" v-model="searchItem.realName"></el-input>
                </el-form-item>
                <el-form-item label="借款状态" class="search-item" prop="checkStatus">
                    <el-select v-model="searchItem.checkStatus" value="0" style="width: 120px">
                        <el-option label="申请中" value="0"></el-option>
                        <el-option label="面签" value="1"></el-option>
                        <el-option label="风控初审" value="2"></el-option>
                        <el-option label="合同签署" value="3"></el-option>
                        <el-option label="家访" value="4"></el-option>
                        <el-option label="财务核算" value="5"></el-option>
                        <el-option label="风控复审" value="6"></el-option>
                        <el-option label="资产确认" value="7"></el-option>
                        <el-option label="已完成" value="8"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadData" icon="fa-search">查询</el-button>
                    <el-button @click="resetForm()" icon="fa-repeat">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--表格-->
        <div class="table-box">
            <el-button type="primary" class="add-btn" icon="plus" @click="addApplyTable">新增</el-button>
            <el-table :data="tableData" border tooltip-effect="dark">
                <el-table-column  type="index" align="center" label="序号" width="70"></el-table-column>
                <el-table-column  prop="checkStatus" align="center" label="状态" width="100"></el-table-column>
                <el-table-column  prop="loanNo" align="center" label="订单编号" width="200"></el-table-column>
                <el-table-column  prop="realName" align="center" label="借款人" width="110"></el-table-column>
                <el-table-column  prop="idcard" align="center" label="身份证号码" width="200"></el-table-column>
                <el-table-column  prop="phone" align="center" label="手机号" width="130"></el-table-column>
                <el-table-column  prop="carType" align="center" label="车型" width="150"></el-table-column>
                <el-table-column  prop="carRemark" align="center" label="说明"  width="150" show-overflow-tooltip></el-table-column>
                <el-table-column  prop="loanAmount" align="center" label="申请额度（元）" width="140"></el-table-column>
                <el-table-column  prop="loanTime" align="center" label="申请期限" width="100"></el-table-column>
                <el-table-column property="createTime" align="center" label="创建时间" width="190"></el-table-column>
                <el-table-column property="salesman" align="center" label="业务员" width="150"></el-table-column>
                <el-table-column align="center" label="操作" fixed="right" width="180">
                    <template scope="scope">
                        <span v-if="scope.row.checkStatus === '面签'">
                            <el-button type="primary" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
                        </span>
                        <span v-else-if="scope.row.checkStatus === '申请中'">
                            <el-button type="primary" icon="edit" size="mini" @click="editList(scope.row)">编辑</el-button>
                            <el-button  type="danger" icon="fa-trash-o" size="mini" @click="clickDeleteList(scope.$index, scope.row)" v-if="scope.row.checkStatus !== '面签确认'">删除</el-button>
                        </span>
                        <span v-else>
                            <el-button type="primary" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <el-pagination
            :pageNum-sizes="pageSizeArr"
            :total="pageTotal"
            layout="prev, pager, next, total, sizes"
            @current-change="loadDataPage"
            @size-change="loadDataPageSize">
        </el-pagination>

    </div>
</template>

<script>
import { listLoanInfo, deleteLoanInfo, getProductData } from "@/api/api";
export default {
    name: "apply",
    data () {
        return {
            // 搜索框
            searchItem: {
                userNo: "",
                loanNo: "",
                realName: "",
                phone: "",
                checkStatus: "",
                pageNum: "1",
                pageSize: "10"
            },
            // 分页
            pageSizeArr: ["10","30","50"],
            pageTotal: 0,
            // 列表
            tableData: []
        };
    },
    mounted: function () {
        this.$nextTick(function () {
            this.loadData();
        });
    },
    watch: {
        $route (to) {
            if(to.name === "apply"){
                this.loadData();
            }
        }
    },
    methods: {
        // 新增；
        addApplyTable (){
            this.$router.push({path: "/applyTable", query: {productNo: '20201710301736172929'}});
        },
        // 重置；
        resetForm () {
            this.$refs.searchItem.resetFields();
        },
        // 编辑；
        editList (rows) {
            this.$router.push({path: '/applyTable', query: { loanNo: rows.loanNo, productNo: rows.productNo, userNo: rows.userNo }});
        },
        // 查看借款人详情
        viewDetail (rows) {
            this.$router.push({path: '/apply/borrowerDetails', query: { loanNo: rows.loanNo, userNo: "10201710271112422750" }});
        },
        // 删除
        clickDeleteList (index, rows) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteList(index, rows);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        async deleteList (index, rows) {
            let _this = this;
            await deleteLoanInfo({
                "loanNo": rows.loanNo
            }).then((res) => {
                if(res.data.state.code === "200"){
                    _this.$message({
                        message: "删除成功",
                        type: 'success'
                    });
                    _this.tableData.splice(index,1);
                    _this.loadData();
                }
            });
        },
        // 页码
        loadDataPage(pageNum) {
            this.searchItem.pageNum = pageNum;
            this.loadData();
        },
        loadDataPageSize(pageSize) {
            this.searchItem.pageSize = pageSize;
            this.searchItem.pageNum = 1;
            this.loadData();
        },
        // 数据列表、查询
        async loadData () {
            let _this = this;
            await listLoanInfo(
                this.searchItem
            ).then((res) => {
                let Data = JSON.parse(res.data.ciphertext);
                _this.pageTotal = Data.total;
                Data = Data.list;
                if (Data) {
                    for (let i=0; i<Data.length; i++) {
                        let signStatusArr = ["申请中", "面签","风控初审", "合同签署", "家访", "财务核算", "风控复审", "资产确认", "已完成"];
                        let DateUnit = ["年", "月", "日"];
                        let signRepayType = ["到期还款", "先息后本", "等额本息", "等额本金"];
                        // 状态
                        Data[i].checkStatus = signStatusArr[Data[i].checkStatus];

                         // 申请时间
                        if (Data[i].createTime) {
                            Data[i].createTime = _this.formatTime(Data[i].createTime);
                        };

                         // 面签时间
                        if (Data[i].signTime) {
                            Data[i].signTime = _this.formatTime(Data[i].signTime);
                        };

                        // 申请期限
                        if (Data[i].loanTime) {
                            if(Data[i].loanUnit === "0" || Data[i].loanUnit === "1" || Data[i].loanUnit === "2"){
                                Data[i].loanTime = Data[i].loanTime + DateUnit[Data[i].loanUnit];
                            } else {
                                Data[i].loanTime = Data[i].loanTime + Data[i].loanUnit;
                            }
                        };

                        // 还款方式
                        Data[i].signRepayType = signRepayType[Data[i].signRepayType];
                    };
                }
                _this.tableData = Data;
            });
        }
    }
};
</script>

<style lang="scss" scoped>
    #apply{
        .search-box{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            .add-btn{
                margin: 20px;
                .el-icon-plus{
                    font-size:12px;
                    vertical-align: 1.5px;
                }
                a{
                    color: #fff;
                    text-decoration: none;
                }
            }
        }
        .el-pagination{
            text-align: right;
            padding: 0 10px;
        }
    }
</style>
